<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../../vue.js'></script>
    <script src="./data.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id='app'>
        <button @click="allClick(10086)">全选</button>
        <button @click="allClick(10011)">反选</button>
        <h1>总价：￥ {{total}} </h1>

        <box @change-calc="calc" ref="box" v-for="(item,index) in goods" :pro="item" :key="index"></box>
    </div>
</body>

<template id="box">
    <div class="box">
        <img :src="choose" class="cho" alt="" @click="swi = !swi">
        <img :src="pro.img" class="logo" alt="">
        <h3>{{pro.title}}</h3>
        <h5>价格：￥ {{pro.price}}</h5>
        <section>
            <button @click="pro.number = pro.number <= 1 ? 1 : pro.number - 1">-</button>
            <input type="text" v-model="pro.number" disabled>
            <button @click="pro.number++">+</button>
        </section>
        <h1>组件总结：￥ {{ (pro.number * pro.price).toFixed(2) }} </h1>
    </div>
</template>

<script>

    // 子组件
    const box = {
        template: '#box',
        props: ['pro'],
        data() {
            return {
                // 是否选中
                swi: false
            }
        },
        computed: {
            // 用来判断使用选择的图标还是没有选择的图标
            choose() {
                // 当选中状态发生变化的时候，重新计算总价格
                this.$emit('change-calc')

                return this.swi ? './choose2.png' : './choose.png'
            }
        }
    }

    const app = {
        data() {
            return {
                goods,
                // 总价格
                total: 0
            }
        },

        methods: {
            // 用来计算总价格用的
            calc() {

                // 如果没有组件就不做处理
                if (!this.$refs.box) return

                // 总价
                let num = 0
                // 获取所有的组件
                this.$refs.box.forEach(box => {
                    // console.log(pro);
                    // pro 就是每个组件 
                    // pro.pro 就是组件中的数据
                    // 判断组件是否被选中
                    if (box.swi) {
                        // 记录被选中组件的价格
                        num += box.pro.price * box.pro.number
                    }
                });

                // 将计算结果给到总结果并保留 2 位小数
                this.total = num.toFixed(2)
            },
            // 全选
            allClick(type) {
                // type 10086全选，10011反选
                this.$refs.box.forEach(pro => {
                    if (type == 10086) {
                        // 所有内容设置为 true
                        pro.swi = true
                    } else {
                        pro.swi = !pro.swi
                    }

                });
            }
        },
        components: {
            box
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>